<template>
  <div>
    <a-pagination
      v-model:current="current"
      :total="500"
      show-less-items
    />
    <br />

    <a-pagination
      v-model:current="current1"
      v-model:pageSize="pageSize"
      show-size-changer
      :total="50"
      @showSizeChange="onShowSizeChange"
      :page-size-options="pageSizeOptions"
      show-quick-jumper
      :show-total="(total, range) => `${range[0]}-${range[1]} of ${total} items`"
      hideOnSinglePage
    >
      <template #itemRender="{ type, originalElement }">
        <a v-if="type === 'prev'">上一页</a>
        <a v-else-if="type === 'next'">下一页</a>
        <component
          :is="originalElement"
          v-else
        ></component>
      </template>
      <template #buildOptionText="props">
        <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
        <span v-else>全部</span>
      </template>
    </a-pagination>
    <br />
    <a-pagination
      size="small"
      :total="50"
    />

    <a-pagination
      v-model:current="current"
      simple
      :total="50"
    />
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      current: 2,
      current1: 1,
      pageSize: 10,
      pageSizeOptions: [
        '1', '10', '20', '30', '40', '50'
      ]

    }
  },
  created() { },
  mounted() { },
  methods: {
    onShowSizeChange(e) {
      console.log(e);
    }
  },
  computed: {}
}
</script>
<style scoped lang='scss'>
</style>
